import React, { useState } from 'react';
import { Divider, Tooltip } from 'antd';
import { NodeList } from '@/constant';
import styled from 'styled-components';
import { motion } from 'motion/react';
import './style.less';
import useDesignerStore from '@/store/Designer';

const ASide = styled.aside`
  user-select: none;
  background-color: #fff;
  border-radius: 10px;
  padding: 5px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`

export default () => {
  const { setDragNode } = useDesignerStore();

  const onDragStart = (event, node) => {
    setDragNode({ label: node?.label, type: node?.value });
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <ASide className="aside">
      <div className='node-list'>
        {
          NodeList.map((item) => {
            return <motion.div
              key={item.value}
              className='node-item'
              initial={{ opacity: 0, x: -20 }} // 初始状态：透明且向下偏移
              whileInView={{ opacity: 1, x: 0 }} // 进入视口时：完全不透明且回到原位
              transition={{ duration: 0.2, delay: 0.2 }} // 每个元素延迟 0.2 秒显现
              viewport={{ once: true, margin: "0px -20px" }} // 调整视口触发区域
              onDragStart={(event) => onDragStart(event, item)}
              draggable
            >
              <Tooltip title={item.label} key={item.value} color='#7856ff' placement='right'>
                <motion.img src={item.icon} preview={false} width={32} whileHover={{ scale: 1.2, transition: { duration: 0.1, delay: 0 } }} />
              </Tooltip>
            </motion.div>
          })
        }
      </div>
    </ASide>
  );
};